<template>
	<view class="container">
		<uni-forms ref="baseForm" :rules="rules" :modelValue="baseFormData">
			<uni-forms-item label="组织名" name="teamName" required label-width=110px class="ppz1" required>
				<uni-easyinput v-model="baseFormData.teamName" placeholder="请输入组织名" />
			</uni-forms-item>
			<uni-forms-item label="组织简介" name="teamInfo" required label-width=110px required>
				<uni-easyinput v-model="baseFormData.teamInfo" placeholder="请输入组织简介" type="textarea" />
			</uni-forms-item>
			<uni-forms-item label="所属队伍类型" name="type" label-width=110px required>
				<view style="display: flex; flex-direction: column; justify-content: space-between">
					<uni-data-select :localdata="range" v-model="baseFormData.type"></uni-data-select>
				</view>
			</uni-forms-item>
			<uni-forms-item label="证明材料" name="aspectFill" labelWidth="110px" required>
				<view class="img-box flex flex-wrap">
					<view class="img" v-for="(item, index) in imgList">
						<image class="pic" :src="item" mode="aspectFill" @click="lookImg(index)"></image>
						<image @click="delImg(index)" class="close" src="/static/images/close.png" mode="aspectFill">
						</image>
					</view>
					<!-- 上传按钮 -->
					<view class="img upload flex-center" @click="uploadImg">
						<image class="add-pic" src="/static/images/upload.png" mode="aspectFill"></image>
					</view>
				</view>
			</uni-forms-item>
			<button type="primary" @click="submit">创建组织</button>
			<button type="primary" @click="clear">清空表单</button>
		</uni-forms>
	</view>
</template>

<script>
	import {
		addApply
	} from '@/api/createActive/createActive.js'
	export default {
		name: "CreateApply",
		data() {
			return {
				imgMaxNum: 9,
				imgList: [],
				baseFormData: {
					createBy: '',
					teamName: '',
					teamInfo: '',
					type: '',
					imgUrl: '',
				},
				range: [{
					value: 1,
					text: "服务队"
				}, ],
				rules: {
					teamInfo: {
						rules: [{
							required: true,
							errorMessage: '此处不能为空'
						}]
					},
					create_by: {
						rules: [{
							required: true,
							errorMessage: '此处不能为空'
						}]
					},
					teamName: {
						rules: [{
							required: true,
							errorMessage: '此处不能为空'
						}]
					},
					type: {
						rules: [{
							required: true,
							errorMessage: '此处不能为空'
						}]
					},
				}
			}
		},
		methods: {
			submit() {
				this.$refs.baseForm.validate(['type', 'teamName', 'teamInfo', 'create_by']).then((res) => {
					console.log(this.baseFormData)
					this.baseFormData.imgUrl = this.imgList.toString()
					addApply(this.baseFormData).then(res => {
						console.log(res)
						if (res.code = 200) {
							this.baseFormData = {},
								this.imgList = {},
								uni.showToast({
									title: "活动创建成功"
								}),
								uni.navigateBack({
									delta: 3
								})
						} else {
							uni.showToast({
								title: "未知错误"
							})
						}
					})

				}).catch((err) => {
					uni.showToast({
						icon: 'error',
						title: "表单未填写完整"
					})
				})
			},
			clear() {
				this.baseFormData = {}
			},
			//拿到自己的名字
			getMyName() {
				myName().then(res => {
					//console.log(res.data);
					//console.log(res.data[0].userName);
					this.ppz = res.data[0].userName;
				})
			},
			uploadImg: function() {
							let that = this;
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album', 'camera'], //从相册选择
								success: function(res) {
									var tempFilePaths = res.tempFilePaths;
									if (that.imgList.length + tempFilePaths.length > that.imgMaxNum) {
										uni.showToast({
											title: '超过上传图片的最大数量',
											icon: 'none'
										});
									} else {
										if (that.imgList.length != 0) {
											that.imgList = that.imgList.concat(res
												.tempFilePaths);
										} else {
											//多图上传
											for (var i = 0; i < res.tempFilePaths.length; i++) {
												//显示消息提示框
												//上传逻辑
												uni.uploadFile({
													url: 'http://localhost:8081/api/oss/file/upload', //仅为示例，非真实的接口地址
													filePath: tempFilePaths[i],
													name: 'file',
													formData: {
														'user': 'test'
													},
													success: (res) => {
														that.imgList.push(res.data)
													}
												});
											}
										}
			
									}
								}
							});
						},
						// 查看图片
						lookImg: function(val) {
							const urls = this.imgList;
							const current = val;
							uni.previewImage({
								urls,
								current
							});
						},
						// 删除图片
						delImg: function(index) {
							let that = this;
							console.log(index);
							console.log(that.imgList + '值');
							deleteImage(that.imgList[index]).then(res => {
								this.$showTip('删除成功', 'success')
								this.imgList.splice(index, 1);
							})
						},
		},
	}
</script>

<style lang="scss">
	.container {
		margin: 10px;
		background-color: white;
	}

	.ppz1 {
		padding-top: 10px;
		padding-bottom: 20px;
	}

	.abc {
		padding-bottom: 10px;
	}

	button {
		margin: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.img-box {
		.img {
			width: 200rpx;
			height: 200rpx;
			position: relative;
			margin-left: 20rpx;
			margin-top: 20rpx;

			&:nth-child(3n + 1) {
				margin-left: 0;
			}

			.pic {
				width: 100%;
				height: 100%;
			}

			.close {
				width: 38rpx;
				height: 38rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
			}
		}

		.upload {
			background-color: #f6f6f6;

			.add-pic {
				// width: 100rpx;
				// height: 100rpx;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
